<template>
  <div class="home">
    <NavBar></NavBar>
    <div class="container">
      <div class="left">
        <!-- <div class="left-title"> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="推荐" name="first"
            ><RcmdBox :info="info"></RcmdBox
          ></el-tab-pane>
          <el-tab-pane label="word" name="second"
            ><RcmdBox :info="info"></RcmdBox
          ></el-tab-pane>
          <el-tab-pane label="pdf" name="third"
            ><RcmdBox :info="info"></RcmdBox
          ></el-tab-pane>
          <el-tab-pane label="b站视频" name="fourth"
            ><RcmdBox :info="info"></RcmdBox
          ></el-tab-pane>
        </el-tabs>
        <!-- </div> -->
      </div>
      <div class="right">
        <HotList></HotList>
        <div class="ad">
          <a :key="index" v-for="(Aditem, index) in ad" :href="Aditem.url"
            ><img :src="Aditem.imgUrl" alt=""
          /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
// 左边推荐列表
import RcmdBox from "../components/RcmdBox.vue";
// 右边热门列表
import HotList from "../components/HotList.vue";

export default {
  data() {
    return {
      activeName: "first",
      info: [],
      ad: [{ imgUrl: require("../image/book.png"), url: "/" }],
    };
  },
  mounted() {
    // 初始化首页数据
    this.homeChange();
  },
  name: "Home",
  components: {
    NavBar,
    RcmdBox,
    HotList,
  },
  methods: {
    // 获取首页推荐信息
    homeChange() {
      this.$http({
        // 请求本地json文件
        method: "post",
        // url: "http://localhost:8080/mock/home-recommend-info.json",
        url: "/api/path/pathList",
        params: {
          current: 1,
          size: 7,
        },
      }).then(
        (res) => {
          console.log(res.data);
          this.info = res.data.data.info;
        },
        (err) => {
          console.error("数据获取失败！" + err);
        }
      );
    },
    // 点击切换推荐列表
    handleClick(tab) {
      // console.log(tab);
      // console.log(tab._props.name);// 获取到第几个，然后更新页面的info
      switch(tab._props.name) {
        case "first":
          // 如果选中是第一个，就切换默认推荐
          this.$nextTick(this.homeChange());
          break;
        case "second":
          // 选中第二个，切换word推荐
          this.$nextTick(this.wordhandleChange());
          break;
        case "third":
          // 如果选中是第一个，就切换pdf推荐
          this.$nextTick(this.pdfhandleChange());
          break;
        case "fourth":
          // 选中第二个，切换video推荐
          this.$nextTick(this.videohandleChange());
          break;
      }
    },
    // 点击切换word推荐
    wordhandleChange() {
      this.$http({
        // 请求本地json文件
        method: "post",
        // url: "http://localhost:8080/mock/word-recommend-info.json",
        url: "/api/path/pathList",
        params: {
          current: 1,
          filetype: 'word',
          size: 10,
        }
      }).then(
        (res) => {
          console.log(res.data);
          this.info = res.data.data.info;
        },
        (err) => {
          console.error("word数据获取失败！" + err);
        }
      );
    },
    // 点击切换pdf推荐
    pdfhandleChange() {
      this.$http({
        // 请求本地json文件
        method: "post",
        // url: "http://localhost:8080/mock/pdf-recommend-info.json",
        url: "/api/path/pathList",
        params: {
          current: 1,
          filetype: 'pdf',
          size: 4,
        }
      }).then(
        (res) => {
          console.log(res.data);
          this.info = res.data.data.info;
        },
        (err) => {
          console.error("pdf数据获取失败！" + err);
        }
      );
    },
    // 点击切换视频推荐
    videohandleChange() {
      this.$http({
        // 请求本地json文件
        method: "get",
        url: "http://localhost:8080/mock/video-recommend-info.json",
        // url: "/api/path/pathList",
        // params: {
        //   current: 1,
        //   filetype: 'video',
        //   size: 10,
        // }
      }).then(
        (res) => {
          console.log(res.data.data);
          this.info = res.data.data.info;
        },
        (err) => {
          console.error("视频数据获取失败！" + err);
        }
      );
    },
  },
};
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  /* 取消横向滚动条 */
  overflow-x: hidden;
  background: #f0f2f5;
}
.container {
  display: flex;
  justify-content: center;
  margin-top: 23px;
}
/* .left-title {
  display: flex;
  align-items: center;
  padding-left: 40px;
  margin-bottom: 23px;
  width: 800px;
  height: 52px;
  background: #fff;
  border-radius: 8px;
}
.left-title:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
} */

/* 做左边内容 */
.right {
  margin-left: 20px;
  width: 300px;
}

/* 轮播图 */
.ad {
  overflow: hidden;
  width: 288px;
  height: 250px;
  background: #fff;
  border-radius: 8px;
}
.ad:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
</style>
